<template>
  <div class="step">
    <div class="step-l">
      <h2>Cluster</h2>
      <Cluter v-for="item in cluster" :data="item" :key="item.id"></Cluter>
    </div>
    <div class="step-r">
      <p class="step-r--title">Required Resources (min)</p>
      <div class="step-r--ipt">
        <div class="step-r--ipt">
          <SettingInput :title="'CPUs'" v-model="CPUs" :placeholder="''" :height="50" class="step-item"/>
          <span>cores</span>
        </div>
        <div class="step-r--ipt">
          <SettingInput :title="'Memories'" v-model="Memories" :placeholder="''" :height="50" class="step-item"/>
          <span>GB</span>
        </div>
      </div>
      <div class="step-r--item">
        <p class="setting-title">GPUs</p>
        <n-slider class="slider" v-model:value="GPUs" :marks="marks" step="mark" :min="1" :max="4"/>
      </div>
      <div class="step-r--item">
        <p class="setting-title">Runtime Env</p>
        <n-upload>
          <n-button>Choose File(e.g. enviroment.yaml)</n-button>
        </n-upload>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref} from "vue";
import { NSlider, NUpload, NButton } from 'naive-ui'
import Cluter from '@/components/modelD/dispatcher/Cluster'
import SettingInput from '@/components/fsConfig/SettingInput'

let cluster = [
  { name: 'master1', id: '1a2b3c4d5e', region: 'west-us-1' },
  { name: 'master2', id: '2a2b3c4d5e', region: 'west-us-2' },
  { name: 'master3', id: '3a2b3c4d5e', region: 'west-us-3' },
]

let CPUs = ref('')
let Memories = ref('')
let GPUs = ref('')
let marks = {1: '1',2: '2',3: '3',4: '4'}
</script>

<style scoped>
.step {
  display: flex;
  align-items: flex-start;
  width: 100%;
}
.step-l h2 {
  font-size: var(--settingTitleFontSize);
  margin-top: 0;
}
.step-l{
  width: 20%;
  margin-right: 6%;
}
.step-r {
  flex: 1;
}
.setting-title {
  font-size: var(--settingTitleFontSize);
  margin-bottom: 10px;
}
.step-r--title {
  font-size: var(--settingTitleFontSize);
  margin-bottom: 10px;
  font-weight: bold;
}
.step-r--ipt {
  display: flex;
  align-items: center;
}
.step-r--ipt:first-child {
   margin-right: 10%;
}
.step-r--ipt span {
  font-size: 20px;
  margin-left: 10px;
  margin-top: 10%;
}
.step-r--item {
  padding-top: 40px;
}
.slider {
  width: 60%;
}
</style>
